<template>
<div class="page">
    <div class="sui-pagination clearfix">
        <ul>
            <li :disabled="page.start == 1" @click="$emit('getPage', pageNo-1)">
                <a href="#">«上一页</a>
            </li>
            <li v-if="page.start > 1" @click="$emit('getPage', 1)" :class="{active: 1 == pageNo}">
                <a href="#">1</a>
            </li>
            <li v-if="page.start > 2" @click="$emit('getPage', 2)" >
                <a href="#">...</a>
            </li>
            <li v-for="i in page.end" 
                v-if="i >= page.start" 
                :class="{active: i == pageNo}"
                @click="$emit('getPage', i)"
                :key="i">
                <a href="#">{{i}}</a>
            </li>
            <li class="dotted" v-if="page.end < total - 1"><span>...</span></li>
            <li v-if="page.end < total" @click="$emit('getPage', total)" :class="{active: total == pageNo}">
                <a href="#">{{total}}</a>
            </li>
            <li :disabled="page.end == total" @click="$emit('getPage', pageNo+1)">
                <a href="#">下一页»</a>
            </li>
        </ul>
        <div><span>共{{total}}页&nbsp;</span></div>
    </div>
</div>
</template>

<script>
export default {
    name: 'Pagination',
    props: ['total', 'num', 'continues', 'pageNo'],
    methods: {
        
    },
    computed: {
        page() {
            let {total, num, continues, pageNo} = this;
            let start = 0, end = 0;
            let pages = Math.ceil(total / num); // 有多少页
            if (continues > pages) {
                start = 1;
                end = pages;
            }else if (pageNo - continues / 2 <= 0) {
                start = 1;
                end = continues;
            }else if (pageNo + continues / 2 > total) {
                start = total - continues / 2;
                end = pages;
            }else {
                start = pageNo - parseInt(continues / 2);
                end = pageNo + parseInt(continues / 2);
            }
            console.log('start' + start + " end " + end);
            return {start, end};
        }
    }
}
</script>

<style scoped lang="less">
.page {
    //width: 733px;
    height: 66px;
    overflow: hidden;
    float: right;

    .sui-pagination {
        margin: 18px 0;

        ul {
            margin-left: 0;
            margin-bottom: 0;
            vertical-align: middle;
        //    width: 490px;
            float: left;

            li {
                line-height: 18px;
                display: inline-block;

                a {
                position: relative;
                float: left;
                line-height: 18px;
                text-decoration: none;
                background-color: #fff;
                border: 1px solid #e0e9ee;
                margin-left: -1px;
                font-size: 14px;
                padding: 9px 18px;
                color: #333;
                }

                &.active {
                    a {
                        background-color: #fff;
                        color: #e1251b;
                        border-color: #fff;
                        cursor: default;
                    }
                }

                &.prev {
                    a {
                        background-color: #fafafa;
                    }
                }

                &.disabled {
                    a {
                        color: #999;
                        cursor: default;
                    }
                }

                &.dotted {
                    span {
                        margin-left: -1px;
                        position: relative;
                        float: left;
                        line-height: 18px;
                        text-decoration: none;
                        background-color: #fff;
                        font-size: 14px;
                        border: 0;
                        padding: 9px 18px;
                        color: #333;
                    }
                }

                &.next {
                    a {
                        background-color: #fafafa;
                    }
                }
            }
        }

        div {
            color: #333;
            font-size: 14px;
            float: right;
            width: 241px;
        }
    }
}
</style>